<template>
    <div>
        <div>
            <el-steps :active="active" finish-status="success" simple>
                <el-step title="1.填写课程信息" ></el-step>
                <el-step title="2.上传课程内容" ></el-step>
                <el-step title="3.提交审核" ></el-step>
            </el-steps>
        </div>
        <el-divider></el-divider>
        <div style="width: 100%">
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        type="index"
                        align="center"
                        width="100px">
                    <template slot-scope="scope">
                        <span>第{{scope.$index+1}}章</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="章节名称">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status!=2" v-text="scope.row.title"></span>
                        <input v-if="scope.row.status==2" v-model="scope.row.title" placeholder="请输入章节名称" style="height: 30px;padding-left: 10px"></input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center"
                >
                    <template slot-scope="scope">
                        <el-button type="danger" v-if="scope.row.status==2" @click="addChapter(scope.row)">保存</el-button>
                        <el-button type="text" v-if="scope.row.status!==2" size="small" @click="scope.row.status=2">修改</el-button><br>
                        <el-button type="text" v-if="scope.row.status!==2&&scope.row.videoCount!=0" size="small" @click="ksgl(scope)" >课时管理<span style="color: red">({{scope.row.videoCount}})</span></el-button>
                        <el-button type="text" v-if="scope.row.status!==2&&scope.row.videoCount==0" size="small" @click="ksgl(scope)" >课时管理</el-button><br>
                        <el-button type="text" v-if="scope.row.status!==2" size="small" @click="deleteChapter(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-button type="danger" @click="goLbgl" round>完成返回</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "chapter",
        data(){
            return{
                active:2,
                tableData:[
                    {
                        id:null,
                        title:"",
                        status:2,
                    }
                ],
                courseId: "",
            }
        },
        created() {
            this.courseId=this.$route.params.courseid;
            this.init();
        },
        methods:{
            addChapter(row){
                var that=this;
                if(row.title===""){
                    this.$message.error("请输入章节名称!")
                }else if (row.id==null){
                    this.$http.post(`core/chapter/addChapter/${this.courseId}`,row).then(function (resp) {
                            if (resp.data.code==2000){
                                row.status=1;
                                that.init();
                            }
                    })
                }else {
                    this.$http.post(`core/chapter/updateChapter`,row).then(function (resp) {
                        if (resp.data.code==2000){
                            row.status=1;
                            that.init();
                        }
                    })
                }
            },
            ksgl(scope){
                this.$router.push({
                   name:'eduVideo',
                   params:{
                       id:scope.row.id,
                       xuhao:scope.$index+1,
                       courseid:this.courseId
                   }
                });
            },
            deleteChapter(id){
                var that=this;
                this.$http.post(`core/chapter/deleteChapter/${id}`).then(function (resp) {
                    if (resp.data.code==2000){
                        that.init();
                    }
                })
            },
            init(){
                var that=this;
                this.$http.post(`core/chapter/findChapterByCourseId/${this.courseId}`).then(function (resp) {
                    if (resp.data.result.length>0){
                        that.tableData=resp.data.result;
                        that.tableData.push({
                            id:null,
                            title:"",
                            status:2,
                        })
                    }

                })
            },
            goLbgl(){
                this.$router.push({name:'lbgl'})
            }
        },
    }
</script>

<style scoped>

</style>